<template>
  <div class="contens">
    <div class="search">
      <div class="conten_search">
        <el-input
          class="conten_search_input"
          type="text"
          :prefix-icon="Search"
        ></el-input>
        <el-button size="large" class="conten_search_button">
          搜索
        </el-button>
      </div>
      <div class="conten_select">
        <div>
          <span>资源类型&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-select
            v-model="value"
            class="m-2"
            placeholder="全部资源"
            size="default"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="conten_select_State">
          <span>状态&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-select
            v-model="value1"
            class="m-2"
            placeholder="全部"
            size="default"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="operate">
      <div class="one"><span>内容</span></div>
      <div class="two"><span>发布时间</span></div>
      <div class="three"><span>数据</span></div>
      <div class="four"><span>状态</span></div>
      <div class="five"><span>操作</span></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'my_dynamics',
})
</script>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const value = ref('')
const value1 = ref('')

const options = [
  {
    value: '全部资源',
    label: '全部资源',
  },
  {
    value: '作品',
    label: '作品',
  },
  {
    value: '教程',
    label: '教程',
  },
  {
    value: '动态',
    label: '动态',
  },
  {
    value: '专题',
    label: '专题',
  },
]

const options1 = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: '已发布',
    label: '已发布',
  },
  {
    value: '未发布',
    label: '未发布',
  },
  {
    value: '审核中',
    label: '审核中',
  },
  {
    value: '审核未通过',
    label: '审核未通过',
  },
  {
    value: '仅主页可见',
    label: '仅主页可见',
  },
]
</script>

<style scoped lang="less">
.contens {
  width: 1020px;
  height: 700px;
  padding: 0, 30px;
  .search {
    padding: 16px, 30px;
    display: flex;
    .conten_search {
      padding-right: 30px;
      display: flex;
      .conten_search_input {
        background-color: #ccc;
      }
      .conten_search_button {
        margin-left: 10px;
      }
    }
    .conten_select {
      display: flex;
      margin: auto 0;
      .conten_select_State {
        margin-left: 16px;
      }
      span {
        font-size: 16px;
      }
    }
  }
  .operate {
    display: flex;
    margin-top: 16px;
    background-color: #f2eded;
    .one {
      width: 410px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
    .two {
      width: 150px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
    .three {
      width: 134px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
    .four {
      width: 133px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
    .five {
      width: 133px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
  }
}
</style>
